<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 小数点2位显示 -->
		<!-- <td>{{'$'+book.price.toFixed(2)}}</td> -->
		<!-- 但这样显示不能复用 -->
		<!-- 函数方法 -->
		<!-- <td>{{getFixnum(index)}}</td> -->
		<!-- 更好的方法:过滤器 -->
		
		<!-- 当数量小于1的时候给减法disable -->
		<div id="app">
		<table>
			<th>id</th>
			<th>书籍名称</th>
			<th>出版日期</th>
			<th>价格</th>
			<th>购买数量</th>
			<th>操作</th>
			
			<tr v-for="(book,index) in books">
				<td>{{book.id}}</td>
				<td>{{book.name}}</td>
				<td>{{book.date}}</td>
				<!-- <td>{{book.price.toFixed(2)}}</td>	 -->
				<!-- <td>{{getFixnum(index)}}</td> -->
				<td>{{book.price | showPrice}}</td>	
				<td><button @click="decrement(index)" :disabled="book.count<=1">-</button>{{book.count}}<button @click="increment(index)">+</button></td>
				<td><button type="button">移除</button></td>
			</tr>
			<tfoot>
				总价:{{totalPrice | showPrice}}
			</tfoot>
		</table>
		</div>
</body>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="./main.js" type="text/javascript" charset="utf-8"></script>
</html>
